<script setup>
import { ref } from "vue";
import MaterialButton from "@/components/MaterialButton.vue";

import CenteredBlogCard from "./CenteredBlogCard.vue";
import downloadIcon from "@/assets/img/assets/download.png";
import tireImg from "@/assets/img/home/tires/defaultTire.png";
import leftIcon from "@/assets/img/assets/left.png";
import rightIcon from "@/assets/img/assets/right.png";
import { listPage, getTiresType } from "@/api/tires";
import { download } from "@/utils/request";
import { Modal } from "ant-design-vue";
let resObj = ref({});
let dictArr = ref([]);
let open = ref(false);
getTiresType().then((res) => {
  dictArr.value = res.data;
});

listPage({ pageNum: 1, pageSize: 999 }).then((res) => {
  let result = res.data.records.reduce((a, b) => {
    if (a[b.tiresType]) {
      //根据old分类
      a[b.tiresType].push(b);
    } else {
      a[b.tiresType] = [b];
    }
    return a;
  }, {});
  resObj.value = result;
});
let valueId = ref("");
let productPics = ref([]);
let detailIndex = ref(0);
const preview = (value, id) => {
  valueId.value = id;
  //子组件用emit向父组件触发一个事件
  if (value) {
    productPics.value = value.split(",");
  }
};
const openDialog = (index) => {
  detailIndex.value = index;
  open.value = true;
};
const downloadFiles = (url, fileName) => {
  //图片的地址
  fetch(url)
    // 获取 blob 对象
    .then((res) => res.blob())
    .then((blob) => {
      // 创建a标签
      var link = document.createElement("a");
      // 设置a标签为不可见
      link.style.display = "none";
      // 将a标签添加到body
      document.body.appendChild(link);
      // 生成Blob URL并设置给a标签的href属性
      var url = window.URL.createObjectURL(blob);
      link.href = url;
      // 设置a标签的download
      link.download = fileName;
      // 模拟点击事件进行下载
      link.click();
      //下载完成后清理URL对象和a标签
      window.URL.revokeObjectURL(url);
      document.body.removeChild(link);
    });
};
const downloadOp = (value, id) => {
  valueId.value = id;
  //子组件用emit向父组件触发一个事件
  if (value) {
    let arr = value.split(",");
    arr.forEach((url, index) => {
      downloadFiles(url, "image" + index);
    });
  }
};
const downloadOpe = () => {
  productPics.value.forEach((url, index) => {
    downloadFiles(url, "image" + index);
  });
};
const lastImg = () => {
  if (detailIndex.value > 0) detailIndex.value--;
};
const nextImg = () => {
  if (detailIndex.value < productPics.value.length) detailIndex.value++;
};
if (translate) {
  translate.listener.start();
  translate.execute();
}
</script>
<template>
  <div>
    <div
      class="container text-center"
      v-for="(dict, dictIndex) in dictArr"
      :key="dictIndex"
    >
      <h1 class="text-f-ERASBD text-black img-title text-center uppercase">
        {{ dict.dictLabel }}
      </h1>
      <!-- <h5 class="text-f-Montserrat-Bold text-black mb-2">
        TIRE IMAGES OF {{ dict.dictLabel }}
      </h5> -->
      <div class="row">
        <div
          class="col-lg-3"
          v-for="(item, index) in resObj[Number(dict.dictValue)]"
          :key="index"
        >
          <CenteredBlogCard
            :cardId="item.id"
            :image="item.productPic || tireImg"
            :title="item.productName"
          >
            <div class="row mt-3">
              <div class="col-lg-6">
                <MaterialButton
                  variant="gradient"
                  :color="valueId == item.id + 'l' ? 'danger' : 'secondary'"
                  class="card-btn uppercase"
                  fullWidth
                  data-bs-toggle="modal"
                  data-bs-target="#exampleModal"
                  @click="preview(item.productPic, item.id + 'l')"
                >
                  PREVIEW</MaterialButton
                >
              </div>
              <div class="col-lg-6">
                <MaterialButton
                  variant="gradient"
                  :color="valueId == item.id + 'r' ? 'danger' : 'secondary'"
                  class="px-0 card-btn uppercase"
                  fullWidth
                  @click="downloadOp(item.productPic, item.id + 'r')"
                >
                  DOWNLOAD</MaterialButton
                >
              </div>
            </div>
          </CenteredBlogCard>
        </div>
      </div>
    </div>
    <!-- Modal -->
    <div
      class="modal fade modal-lg"
      id="exampleModal"
      tabindex="-1"
      aria-labelledby="exampleModalLabel"
      aria-hidden="true"
    >
      <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content" style="">
          <div class="modal-header">
            <h5 class="modal-title text-f-ERASBD" id="exampleModalLabel">
              Tire Details
            </h5>
            <MaterialButton
              color="black"
              class="btn-close"
              data-bs-dismiss="modal"
              aria-label="Close"
            >
              <svg
                t="1729944367987"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="4261"
                width="200"
                height="200"
              >
                <path
                  d="M867.648 951.296 512 595.648l-355.648 355.648c-11.52 11.52-30.272 11.52-41.856 0L72.64 909.44c-11.52-11.52-11.52-30.272 0-41.856L428.352 512 72.64 156.352c-11.52-11.52-11.52-30.272 0-41.856l41.856-41.856c11.52-11.52 30.272-11.52 41.856 0L512 428.288l355.648-355.648c11.52-11.52 30.272-11.52 41.856 0l41.856 41.856c11.52 11.52 11.52 30.272 0 41.856L595.648 512l355.648 355.648c11.52 11.52 11.52 30.272 0 41.856l-41.856 41.856C897.984 962.88 879.168 962.88 867.648 951.296L867.648 951.296z"
                  p-id="4262"
                ></path>
              </svg>
            </MaterialButton>
          </div>
          <div class="modal-body" style="margin: 0 0.5rem">
            <div class="row">
              <div
                class="col-lg-3"
                v-for="(item, index) in productPics"
                :key="index"
              >
                <div
                  class="text-center"
                  style="
                    background: #f5f5f5;
                    border-radius: 0.5rem;
                    border: 1px solid #d6dce8;
                    padding: 4rem 0;
                  "
                >
                  <img
                    class="img-fluid show-pointer"
                    style="width: 80%"
                    :src="item"
                    alt=""
                    @click="openDialog(index)"
                  />
                </div>
              </div>
            </div>
          </div>
          <div class="modal-footer text-right align-middle">
            <MaterialButton
              variant="outline"
              color="danger"
              class="mb-0"
              @click="downloadOpe"
            >
              <img
                class="img-fluid"
                style="margin-top: -5px; margin-right: 10px"
                width="12"
                :src="downloadIcon"
                alt=""
              />DOWNLOAD IMAGES
            </MaterialButton>
            <MaterialButton class="mb-0 bg-red" data-bs-dismiss="modal">
              BACK
            </MaterialButton>
          </div>
        </div>
      </div>
    </div>
  </div>
  <Modal v-model:open="open" :footer="null" :zIndex="1051" :closable="false">
    <div class="d-flex align-items-center" style="height: 500px">
      <img
        class="show-pointer"
        :src="leftIcon"
        width="20"
        height="20"
        alt=""
        @click="lastImg"
      />
      <div
        style="
          width: 800px;
          display: flex;
          justify-content: center;
          align-items: center;
        "
      >
        <img
          v-if="detailIndex < productPics.length"
          class="img-fluid"
          :src="productPics[detailIndex]"
          alt=""
        />
        <span v-else>It's already the last one</span>
      </div>

      <img
        class="show-pointer"
        :src="rightIcon"
        width="20"
        height="20"
        alt=""
        @click="nextImg"
      />
    </div>
  </Modal>
</template>

<style scoped>
.col-lg-3 {
  margin: 2rem 0;
}
@media (max-width: 991.98px) {
  .col-lg-3 {
    margin: 1rem 0;
    flex: 0 0 auto;
    width: 50%;
  }
  .card-btn {
    padding: 0.625rem;
  }
  .img-title {
    display: inline-block;
    width: 308px;
  }
}
@media (min-width: 1400px) {
  .container {
    max-width: 1496px !important;
  }
}
</style>
